<template>
  <div class="navbar">
      <cube-scroll-nav-bar id="header_nav" class="auto_fixed" :class="auto_fixed" direction="horizontal" :current="current" :labels="labels" @change="changeHandler" />
      <div class="auto_fixed_fake" :style="{display: auto_fixed.fixed ? 'block':'none'}"></div>
      <!-- 主页 -->
      <div>
        <div class="tro">
          <span class="tit">医生简介</span>
          <p>中华医学会皮肤科分会青年委员，中华医学会皮肤科分会皮肤激光医疗美容学组委员，中华医学会医学美学与美容学分会美容技术学组委员，中华医学会医学美学与美容学分会激光美容学组委员，中国医师协会毛…</p>
          <span class="tit">个人成就</span>
          <p>主持国家自然科学基金（3项）、重庆市自然科学基金（2项）、重庆医科大学附属第一医院医院课题（1项）等国家及省部级课题，发表SCI及国内核心期刊论著数十篇。于2009年被评为“第五届中国医师学会皮肤…</p>
          <span class="tit">科室介绍</span>
          <p>主持国家自然科学基金（3项）、重庆市自然科学基金（2项）、重庆医科大学附属第一医院医院课题（1项）等国家及省部级课题，发表SCI及国内核心期刊论著数十篇。于2009年被评为“第五届中国医师学会皮肤…</p>
        </div>
        <ul class="address">
          <li class="tit">出诊信息</li>
          <li>
            出诊医院：
            <span>重庆医科大学附属第一医院</span>
          </li>
          <li>
            门诊时间：
            <span>周一上午下午，周四上午</span>
          </li>
          <li>
            医院地址：
            <span>重庆市渝中区袁家岗友谊路1号</span>
          </li>
          <li>注：具体以线下医疗机构门诊信息为准。</li>
        </ul>
      </div>

      <!-- 动态 -->
      <div>
        <!-- <div class="article">
          <p class="exflow">减肥正当时，朋友们可别错过啦～</p>
          <dl>
            <dt>
              <img src="../assets/d.png" alt />
            </dt>
            <dd class="fr exflow3">女生扎堆的地方总是免不了护肤、美妆、减肥等话题，尤其是一谈起减肥...女生扎堆的地方总是免不了护肤、美妆、减肥等话题，尤其是一谈起减肥女生扎堆扎堆…</dd>
          </dl>
        </div>
        <div class="article">
          <p class="exflow">减肥正当时，朋友们可别错过啦～</p>
          <dl>
            <dt>
              <img src="../assets/d.png" alt />
            </dt>
            <dd class="fr exflow3">女生扎堆的地方总是免不了护肤、美妆、减肥等话题，尤其是一谈起减肥...女生扎堆的地方总是免不了护肤、美妆、减肥等话题，尤其是一谈起减肥女生扎堆扎堆…</dd>
          </dl>
        </div>-->

        <!-- 无动态数据时 -->
        <!-- <dl class="masterless" align="center">
            <dt><img src="../assets/none.png" alt=""></dt>
            <dd>还没有任何内容哦～</dd>
        </dl>-->
      </div>

      <!-- 类别 -->
      <div class="synthesis">
        <h3>
          医生视频
          <router-link to="/" class="fr">查看更多 ></router-link>
        </h3>
        <div class="videoBox">
          <router-link to="/">
            <img src="../assets/dd.png" alt />
            <p class="exflow2">你知道哪些人不适合做核磁共振检查吗？</p>
          </router-link>
        </div>
        <h3>
          医生音频
          <router-link to="/" class="fr">查看更多 ></router-link>
        </h3>
        <ul class="audioCard">
          <li>
            <p class="exflow">减肥正当时，朋友们可别错过啦～</p>
            <span>
              <span class="noaudio" v-if="!isShow">暂无音频资源</span>
              <span class="audio" v-if="isShow">
                <i class="el-icon-caret-right play" :class="'play' + index" @click="play(index)"></i>
                <span>00:00</span>
                <span class="pross">
                  <span :class="'pross_line' + index" class="pross_line"></span>
                  <span :class="'pross_spot' + index" class="pross_spot"></span>
                </span>
                <span>09:45</span>
                <audio :class="'audio' + index" controls="controls" hidden="true">
                  <source :src="src" :type="sourceType" />
                </audio>
              </span>
            </span>  
          </li>
        </ul>
        <h3>
          医生问答
          <router-link to="/" class="fr">查看更多 ></router-link>
        </h3>
        <div class="faqsCard">
          <router-link to="/">
            <div>
              <b class="fl">问：</b>
              <p class="exflow">脸上痤疮的治疗方法？</p>
            </div>
            <div>
              <b class="fl">答：</b>
              <p class="exflow3">痤疮一般可以选用药物治疗或者是物理治疗。药物治疗主要有外用涂抹的药物以及口服的药物，外用涂抹的药有维a酸乳膏，阿达林凝…</p>
            </div>
          </router-link>
        </div>
        <h3>
          医生文章
          <router-link to="/" class="fr">查看更多 ></router-link>
        </h3>
        <div class="articleCard">
          <router-link to="/">
            <h4>减肥正当时，朋友们可别错过啦～</h4>
            <p class="exflow3">女生扎堆的地方总是免不了护肤、美妆、减肥等话题，尤其是一谈起减肥...女生扎堆的地方总是免不了护肤、美妆、减肥等话题，尤其减肥女生扎堆…</p>
          </router-link>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      default: "http://music.163.com/song/media/outer/url?id=82932.mp3"
    },
    sourceType: {
      type: String,
      default: "audio/mp3"
    },
    index: {
      type: Number,
      default: 0
    },
    longTime: {
      type: [Number, String],
      default: ""
    }
  },
  computed: {
    isShow: {
      get() {
        if (this.src === "" || this.src == null) {
          return false;
        } else {
          return true;
        }
      },
      set() {}
    }
  },
  data() {
    return {
      tag: 0,
      music_path: "http://music.163.com/song/media/outer/url?id=82932.mp3",
      scrollY: 0,
      current: "主页",
      labels: [
        "主页",
        "动态",
        "componet3",
        "componet4",
        "componet5",
        "componet6",
        "componet7",
        "componet8"
      ],
      auto_fixed: {
        fixed: false
      },
      header_height:0
    };
  },
  methods: {
    changeHandler(cur) {
      this.current = cur;
    },
    onScroll() {
      let scrolled =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log("滚动的距离:" + scrolled, "头部的高度:" + this.header_height);
      // console.log(scrolled >= this.header_height);
      this.auto_fixed = {
        auto_fixed: true,
        fixed: scrolled >= this.header_height
      };
    },
    // 音频播放
    play(index) {
      // 切换图表状态
      const obj = document.getElementsByClassName("play" + index)[0]; // 播放图表
      const MP3 = document.getElementsByClassName("audio" + index)[0]; // 播放控件
      const pross_line = document.getElementsByClassName(
        "pross_line" + index
      )[0]; // 播放进度长度
      const pross_spot = document.getElementsByClassName(
        "pross_spot" + index
      )[0]; // 播放进度点
      const str = obj.className;
      if (str.indexOf("el-icon-video-pause") > 0) {
        obj.classList.add("el-icon-caret-right");
        obj.classList.remove("el-icon-video-pause");
      } else {
        obj.classList.add("el-icon-video-pause");
        obj.classList.remove("el-icon-caret-right");
      }
      const sum = MP3.duration; // 总时间
      let newsTime = MP3.currentTime; // 播放时间
      // 进度条长度为128px
      let addNum = 0; // 当前播放进度长度
      // 清除上次的定时器
      clearInterval(this.tag);
      if (MP3.paused) {
        MP3.play();
        this.tag = setInterval(() => {
          newsTime = MP3.currentTime;
          addNum = (newsTime / sum) * 112;
          pross_line.style.cssText = "width:" + addNum + "px";
          pross_spot.style.cssText = "left:" + addNum + "px";
          if (addNum == 112) {
            pross_line.style.cssText = "";
            pross_spot.style.cssText = "";
            obj.classList.add("el-icon-caret-right");
            obj.classList.remove("el-icon-video-pause");
            clearInterval(this.tag);
          }
        }, 500); // 监听播放进度
      } else {
        MP3.pause();
        clearInterval(this.tag);
        obj.classList.add("el-icon-caret-right");
        obj.classList.remove("el-icon-video-pause");
      }
    }
  }
  // mounted() {
  //   let that = this;
  //   var times = setInterval(() => {
  //     if (this.shows) {
  //       this.$nextTick(function() {
  //         this.header_height = document.getElementById("header_nav").offsetTop;
  //         window.addEventListener("scroll", that.onScroll);
  //         clearInterval(times);
  //       });
  //     }
  //   }, 100);
  // }
};
</script>
<style scoped>
.exflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.exflow2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.exflow3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.navbar {
  background: #ffffff;
  border-radius: 20px;
  /* box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);  */
}
.navbar .showdow-only-top {
  box-shadow: 0px -7px 7px -7px #5e5e5e;
}
.cube-scroll-nav-bar-item_active span {
  color: #007cff !important;
}
.cube-scroll-nav-bar {
  color: #999999 !important;
  font-size: 28px !important;
}
.tit {
  font-weight: 600;
  padding: 20px 0 10px;
}
.tro {
  padding: 0 30px;
  line-height: 43px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.tro p {
  padding-bottom: 30px;
}
.address {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 10px 30px 30px;
  color: #666666;
}
.address .tit {
  font-size: 32px;
}
.address > li {
  line-height: 45px;
}
.address > li:last-child {
  font-size: 24px;
  color: #999999;
}
.address span {
  font-weight: bold;
}
.article {
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  margin: 30px;
  color: #666666;
}
.article p {
  width: 100%;
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 25px;
}
.article dt,
.article dd {
  display: inline-block;
}
.article img {
  width: 160px;
  height: 160px;
  border-radius: 20px;
}
.article dd {
  float: right;
  width: 440px;
  margin-top: 15px;
  line-height: 43px;
}
.masterless {
  margin: 55px 0;
  font-size: 36px;
}
.masterless img {
  width: 287px;
  margin-bottom: 20px;
}

.synthesis {
  margin: 30px;
}
.synthesis h3 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 30px;
}
.synthesis h3 a {
  color: #999999;
  font-size: 24px;
}
.synthesis div {
  margin-bottom: 20px;
}
.videoBox > a {
  display: inline-block;
  width: 330px;
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  color: #333333;
  margin: 0 20px 25px 0;
}
.videoBox > a:nth-child(2n) {
  margin-right: 0;
}
.videoBox > a > img {
  width: 100%;
  height: 186px;
}
.videoBox > a > p {
  padding: 5px 20px 0;
  margin-bottom: 15px;
}
.articleCard > a,
.faqsCard > a {
  display: inline-block;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.articleCard h4 {
  font-size: 32px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 20px;
}
.faqsCard p {
  display: inline-block;
  width: 574px;
}
.faqsCard b {
  color: #333333;
}
.audioCard li {
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  overflow: hidden;
}
.audioCard li p {
  padding: 30px;
  font-weight: bold;
}

.audio {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 30px;
  color: #fff;
  background: #007CFF;
  box-sizing: border-box;
}
.audio .play {
  font-size: 20px;
  padding-right: 17px;
}
.audio .pross {
  display: inline-block;
  background: #ffffff;
  margin-right: 5px;
  width: 391px;
  height: 2px;
  position: relative;
  margin:0 20px;
}
.audio .pross_spot {
  top: -12px;
  position: absolute;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius:50%;
  background: #fff;
}
.audio .pross_line {
  position: absolute;
  background: #fff;
  height: 5px;
  left: 0;
  width: 0;
}
/* 滚动顶部 */
.cube-scroll-nav-bar {
  /* background: red !important; */
  border-radius: 20px 20px 0 0;
  box-shadow: 0px -5px 20px rgba(0,0,0,0.1); 
  border-bottom: 2px solid rgba(216,216,216,.5);
}
.fixed {
  position: fixed;
  top: 0px;
  width: 100%;
}
.auto_fixed {
  height: 80px;
}
.auto_fixed_fake {
  height: 80px;
}
</style>